<!-- 2020年2月15日14:57:57 完成 -->
<template>
	<view class="addressPage" :style="{'--bg': common.appStyle.home_nav_color}">
		<view class="edgeInsetTop"></view>
		<wanl-empty v-if="addressList.length === 0 && status !== 'loading'" text="暂无收获地址哟" />
		<view>
			<view class="addressPage-box" style="display: flex;flex-direction: column;align-items: center;">
				<view class="cu-item" :class="modalName == 'move-box-' + index ? 'move-cur' : ''" v-if="addressList"
					style="
					padding: 24rpx 24rpx 0 24rpx;
					width: 96vw; border-radius: 16rpx; box-shadow: 0 0 1vw 0 #eee;"
					v-for="(item, index) in addressList" :key="item.id" @tap="checkAddress(item)"
					@touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd"
					:data-target="'move-box-' + index">
					<!-- <view class="cu-avatar round lg" style="background-color: #fe6600;">{{ item.name.substring(0, 1) }}</view> -->
					<view >
						<view style="display: flex;justify-content: space-between;">
							<text class="wanl-pip margin-right-sm text-lg">收货人： {{ item.name }}</text>
							<text style="color: black;" class="wanl-gray-light text-sm">{{ item.mobile }}</text>
						</view>
						<view class="text-sm wanl-pip text-cut-2" style=" line-height: 2;color: #9C9C9C; margin: 16rpx 0;">

							{{ item.province }} {{ item.city }} {{ item.district }} {{ item.address }}
						</view>
					</view>
					
					<view class="bottom" style=" height: 12.53vw;border-top: 0.5vw solid #eee;  display: flex;align-items: center; justify-content: space-between;" >
													<!-- <text style="" class="wlIcon-dizhi text-red margin-right-xs"  v-if="item.default == 1"></text> -->
						<view class="left" >
							<view style="display: flex;align-items: center;font-size: 3.6vw;"  v-if="item.default == 1" >
								<!-- <svg style="width: 4vw;height: 4vw;margin: 2vw 2vw 2vw 0;" t="1719554558777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4307" width="200" height="200"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#11E195" p-id="4308"></path></svg> -->
								<image  style="width: 4vw;height: 4vw;margin: 2vw 2vw 2vw 0;" src="../../../static/images/user/act.png" mode=""></image>
								<text style="color: #FD7601;">设为默认</text>
							</view>
							
							<view style="display: flex;align-items: center;font-size: 3.6vw;" v-else>
								<!-- <svg style="width: 4vw;height: 4vw;margin: 2vw 2vw 2vw 0; " t="1719554558777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4307" width="200" height="200"><path d="M512 1024C229.248 1024 0 794.752 0 512S229.248 0 512 0s512 229.248 512 512-229.248 512-512 512z m-114.176-310.954667a53.333333 53.333333 0 0 0 75.434667 0l323.328-323.328a53.333333 53.333333 0 1 0-75.434667-75.434666l-287.914667 283.306666-128.853333-128.853333a53.333333 53.333333 0 1 0-75.434667 75.434667l168.874667 168.874666z" fill="#bfbfbf" p-id="4308"></path></svg> -->
								<image  style="width: 4vw;height: 4vw;margin: 2vw 2vw 2vw 0;" src="../../../static/images/user/gray.png" mode="" @tap.stop="updateAddress(item)"></image>
									<text style="color: #bfbfbf;">设为默认</text>
							</view>
						</view>
						
						<view class="move" style="color: #9C9C9C; display: flex; " >
							<view style="display: flex;align-items: center; font-size: 4vw;"  @tap.stop="addAddress('edit', item)">
								<text style="display: block;" class="wlIcon-xiugaioryijian text-xl"></text>   <text style="font-size: 3vw;" > 编辑 </text>  </view>
							<view style="display: flex;align-items: center;margin-left: 5vw;"  @tap.stop="delAddress(item.id, index)">
								<svg style="width: 4.56vw;height: 5.26vw;" t="1719553781774" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4296" width="200" height="200"><path d="M736.653061 929.959184H287.346939c-45.97551 0-83.591837-37.616327-83.591837-83.591837V355.265306h616.489796v491.102041c0 45.97551-37.616327 83.591837-83.591837 83.591837zM245.55102 397.061224v449.306123c0 22.987755 18.808163 41.795918 41.795919 41.795918h449.306122c22.987755 0 41.795918-18.808163 41.795919-41.795918V397.061224H245.55102z" fill="#9C9C9C" p-id="4297"></path><path d="M407.510204 794.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V512c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959zM616.489796 794.122449c-11.493878 0-20.897959-9.404082-20.897959-20.897959V512c0-11.493878 9.404082-20.897959 20.897959-20.897959s20.897959 9.404082 20.897959 20.897959v261.22449c0 11.493878-9.404082 20.897959-20.897959 20.897959z" fill="#9C9C9C" p-id="4298"></path><path d="M846.367347 397.061224H177.632653c-45.97551 0-83.591837-37.616327-83.591837-83.591836v-31.346939c0-45.97551 37.616327-83.591837 83.591837-83.591837h668.734694c45.97551 0 83.591837 37.616327 83.591837 83.591837v31.346939c0 45.97551-37.616327 83.591837-83.591837 83.591836zM177.632653 240.326531c-22.987755 0-41.795918 18.808163-41.795918 41.795918v31.346939c0 22.987755 18.808163 41.795918 41.795918 41.795918h668.734694c22.987755 0 41.795918-18.808163 41.795918-41.795918v-31.346939c0-22.987755-18.808163-41.795918-41.795918-41.795918H177.632653z" fill="#9C9C9C" p-id="4299"></path><path d="M650.44898 240.326531h-276.89796c-28.734694 0-52.244898-23.510204-52.244898-52.244898v-41.795919c0-28.734694 23.510204-52.244898 52.244898-52.244898h276.89796c28.734694 0 52.244898 23.510204 52.244898 52.244898v41.795919c0 28.734694-23.510204 52.244898-52.244898 52.244898z m-276.89796-104.489796c-5.746939 0-10.44898 4.702041-10.448979 10.448979v41.795919c0 5.746939 4.702041 10.44898 10.448979 10.448979h276.89796c5.746939 0 10.44898-4.702041 10.448979-10.448979v-41.795919c0-5.746939-4.702041-10.44898-10.448979-10.448979h-276.89796z" fill="#9C9C9C" p-id="4300"></path></svg>
								   <text style="font-size: 3vw;" > 删除 </text> </view>
						</view>
					</view>
					
					
				</view>
				<wanl-empty text="没有找到任何地址" src="address_default3x" v-else />
			</view>
		</view>

		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction"><button @tap="addAddress('add')"
				style="color: white; border-radius: 106.93vw;background-color: #FD7601; font-size: 4vw; "
				class="cu-btn lg">新增收货地址</button></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				source: 0,
				order_id: 0,
				addressList: [],
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				//上拉下拉
				total: 0, //数据量
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载..',
					contentnomore: ''
				}
			};
		},
		computed: {
			...mapState(['common']),
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			this.current_page = 1;
			this.reload = true;
			this.loadData();
		},
		// 监听上拉加载
		onReachBottom() {
			//判断是否最后一页
			if (this.current_page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.current_page = this.current_page + 1; //页码+1
				this.status = 'loading';
				this.loadData(true);
			}
		},
		onLoad(option) {
			uni.setNavigationBarColor({
			  frontColor:'#000000', // 导航栏标题颜色，只能是'black'或'white'
			  backgroundColor:this.common.appStyle.home_nav_color // 导航栏背景颜色
			});
			this.source = option.source;
			this.order_id = option.order_id;
			this.loadData();
		},
		methods: {
			async loadData(reload, refresh) {
				this.$api.get({
					url: '/wanlshop/address/getaddress',
					loadingTip: refresh ? '更新列表中...' : '',
					data: {
						page: reload ? (this.current_page) : 1
					},
					success: res => {
						if (reload) {
							this.addressList = this.addressList.concat(res.data);
						} else {
							this.addressList = res.data;
							uni.stopPullDownRefresh();
						}
						this.total = res.total; //数据量
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? 'noMore' : 'more';
					}
				});
			},
			// 删除
			async delAddress(id, key) {
				this.$delete(this.addressList, key); //vue方法
				this.$api.post({
					url: '/wanlshop/address/deladdress',
					data: {
						id: id
					}
				});
			},
			//添加或修改成功之后回调
			async refreshList(data, type) {
				this.$api.post({
					url: '/wanlshop/address/address',
					data: {
						data: data,
						type: type
					},
					success: (res) => {
						this.loadData(false, true);
					}
				});
			},
			//选择地址
			checkAddress(item) {
				if (this.source == 1) { // 购物车过来的
					this.$wanlshop.prePage().loadData(item.id, {
						address: item.address,
						city: item.city,
						district: item.district,
						id: item.id,
						mobile: item.mobile,
						name: item.name,
						province: item.province,
					});
					this.$wanlshop.back(1);
				} else if (this.source == 2) { //我的订单修改地址  地址ID   返回订单ID
					this.$wanlshop.prePage().refreshList(item.id, this.order_id);
					this.$wanlshop.back(1);
				} else if (this.source == 3) { //我的订单详情 修改地址
					this.$api.post({
						url: '/wanlshop/order/editOrderAddress',
						data: {
							id: this.order_id,
							address_id: item.id
						},
						success: (res) => {
							this.$wanlshop.prePage().loadData({ id: this.order_id });
							this.$wanlshop.back(1);
						}
					});
				}
			},
			updateAddress (item) {
				let type = 'edit'
				item.default = '1'
				this.refreshList(item,type);
			},
			// 新增地址
			addAddress(type, item) {
				this.$wanlshop.to(`/pages/user/address/addressManage?type=${type}&data=${JSON.stringify(item)}`);
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX;
			},
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
			},
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target;
				} else {
					this.modalName = null;
				}
				this.listTouchDirection = null;
			}
		}
	};
</script>

<style>
	page {
		height: 100%;
	}
	.addressPage {
		background-color: var(--bg);
		padding: 18rpx;
		min-height: 100%;
	}
	.cu-avatar.lg {
		width: 90rpx;
		height: 90rpx;
		font-size: 1.5em;
	}
	.cu-item {
		background-color: #ffffff;
		margin-bottom: 18rpx;
	}
	.cu-item:last-child {
		margin-bottom: 0rpx;
	}
	.cu-list.menu-avatar>.cu-item {
		height: 160rpx;
	}

	.wanlian.cu-bar.tabbar {
		background-color: transparent;
		left: 0;
	}

	.wanlian.cu-bar.tabbar .cu-btn {
		width: calc(100% - 40rpx);
	}

	.wanlian.cu-bar.tabbar .cu-btn.lg {
		font-size: 32rpx;
		height: 86rpx;
	}
</style>